@charset 'utf-8';
@import  'sandal/core';
@import  'core/mixins', 'core/functions', 'core/vars';

.ht-brand-credentials {
	margin-top: $contentPaddingT;
	@extend %clearfix;

	li {
		float: left;
		width: 249px;
		height: 399px;
		margin-right: 1px;
		background: url("../img/brand/credentials01.png") no-repeat;

		&:nth-child(2) {
			background-image: url("../img/brand/credentials02.png");
		}
		&:nth-child(3) {
			background-image: url("../img/brand/credentials03.png");
		}
		&:nth-child(4) {
			margin-right: 0;
			background-image: url("../img/brand/credentials04.png");
		}

		&:hover {
			.ht-brand-credentials-info {
				opacity: 1;
			}
		}
	}

	.ht-brand-credentials-info {
		width: 100%;
		height: 100%;
		padding: 15px;
		line-height: 2.5;
		background-color: rgba(0, 0, 0, .6);
		color: #fff;
		opacity: 0;
		transition: .5s;

		p {
			margin-bottom: 0;
		}
	}
}

.ht-brand {
	@extend %clearfix;

	p {
		text-align: center;
	}
	img {
		margin: 0 auto;
		display: block;
	}
}